<template>
  <div class="tutorials-container">
    <!-- 添加导航组件 -->
    <help-navigation />
    
    <n-card class="tutorials-card">
      <template #header>
        <div class="card-header">
          <h1>教程中心</h1>
          <div class="search-box">
            <n-input-group>
              <n-input v-model:value="searchQuery" placeholder="搜索教程..." clearable />
              <n-button type="primary">
                <template #icon><n-icon><Search /></n-icon></template>
                搜索
              </n-button>
            </n-input-group>
          </div>
        </div>
      </template>

      <div class="tutorials-content">
        <!-- 分类导航 -->
        <div class="tutorials-nav">
          <n-menu
            v-model:value="activeCategory"
            :options="categoryOptions"
            :indent="18"
          />
        </div>

        <!-- 教程列表 -->
        <div class="tutorials-list">
          <div class="category-header">
            <h2>{{ currentCategoryTitle }}</h2>
            <n-space>
              <n-select v-model:value="sortBy" :options="sortOptions" size="small" />
              <n-select v-model:value="filterBy" :options="filterOptions" size="small" />
            </n-space>
          </div>

          <!-- 教程列表内容 -->
          <div class="tutorials-grid">
            <n-card 
              v-for="tutorial in filteredTutorials" 
              :key="tutorial.id" 
              class="tutorial-card"
              :class="{ 'video-tutorial': tutorial.type === 'video' }"
              hoverable
              @click="openTutorial(tutorial)"
            >
              <div class="tutorial-thumbnail">
                <img :src="tutorial.thumbnail" :alt="tutorial.title">
                <div v-if="tutorial.type === 'video'" class="video-badge">
                  <n-icon><VideocamOutline /></n-icon>
                  <span>{{ tutorial.duration }}</span>
                </div>
              </div>
              <div class="tutorial-info">
                <h3 class="tutorial-title">{{ tutorial.title }}</h3>
                <p class="tutorial-description">{{ tutorial.description }}</p>
                <div class="tutorial-meta">
                  <span class="tutorial-level" :class="tutorial.level">{{ levelText(tutorial.level) }}</span>
                  <span class="tutorial-date">{{ formatDate(tutorial.date) }}</span>
                </div>
              </div>
            </n-card>
          </div>
          
          <!-- 分页 -->
          <div class="pagination">
            <n-pagination
              v-model:page="currentPage"
              :page-count="totalPages"
              :page-size="pageSize"
            />
          </div>
        </div>
      </div>
    </n-card>
    
    <!-- 教程详情弹窗 -->
    <n-modal v-model:show="showTutorialModal" preset="card" style="width: 800px;">
      <template #header>
        <div class="modal-header">
          <h2>{{ selectedTutorial?.title || '' }}</h2>
        </div>
      </template>
      
      <div v-if="selectedTutorial" class="tutorial-detail">
        <div v-if="selectedTutorial.type === 'video'" class="tutorial-video">
          <video controls>
            <source :src="selectedTutorial.videoUrl" type="video/mp4">
            您的浏览器不支持视频播放
          </video>
        </div>
        <div v-else class="tutorial-content">
          <img :src="selectedTutorial.thumbnail" :alt="selectedTutorial.title" class="tutorial-image">
          <div class="tutorial-text">
            {{ selectedTutorial.content }}
          </div>
        </div>
        
        <div class="tutorial-steps">
          <h3>教程步骤</h3>
          <n-steps :current="1" vertical>
            <n-step 
              v-for="(step, index) in selectedTutorial.steps" 
              :key="index"
              :title="step.title"
              :description="step.description"
            />
          </n-steps>
        </div>
      </div>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, h } from 'vue'
import { useRouter } from 'vue-router'
import { 
  NCard, 
  NButton, 
  NIcon, 
  NInputGroup, 
  NInput, 
  NMenu,
  NSpace,
  NSelect,
  NPagination,
  NModal,
  NSteps,
  NStep
} from 'naive-ui'
import { 
  Search, 
  VideocamOutline 
} from '@vicons/ionicons5'
import HelpNavigation from '../../components/help/HelpNavigation.vue'

// 路由
const router = useRouter()

// 搜索和筛选
const searchQuery = ref('')
const activeCategory = ref('getting-started')
const sortBy = ref('newest')
const filterBy = ref('all')
const currentPage = ref(1)
const pageSize = ref(12)
const showTutorialModal = ref(false)
const selectedTutorial = ref<Tutorial | null>(null)

// 分类选项
const categoryOptions = [
  {
    label: '入门指南',
    key: 'getting-started',
    children: [
      {
        label: '软件介绍',
        key: 'introduction'
      },
      {
        label: '界面概览',
        key: 'interface'
      },
      {
        label: '创建第一个项目',
        key: 'first-project'
      }
    ]
  },
  {
    label: '角色制作',
    key: 'character',
    children: [
      {
        label: '角色设计基础',
        key: 'character-basics'
      },
      {
        label: '骨骼系统使用',
        key: 'bone-system'
      },
      {
        label: '表情编辑',
        key: 'expressions'
      }
    ]
  },
  {
    label: '场景制作',
    key: 'scene',
    children: [
      {
        label: '场景布局',
        key: 'scene-layout'
      },
      {
        label: '环境效果',
        key: 'environment'
      },
      {
        label: '转场效果',
        key: 'transitions'
      }
    ]
  },
  {
    label: '动画制作',
    key: 'animation',
    children: [
      {
        label: '关键帧动画',
        key: 'keyframe'
      },
      {
        label: '时间轴使用',
        key: 'timeline'
      },
      {
        label: '动作库使用',
        key: 'action-library'
      }
    ]
  },
  {
    label: 'AI功能',
    key: 'ai',
    children: [
      {
        label: 'AI生成基础',
        key: 'ai-basics'
      },
      {
        label: '提示词编写技巧',
        key: 'prompt-tips'
      },
      {
        label: '模型训练指南',
        key: 'model-training'
      }
    ]
  }
]

// 排序选项
const sortOptions = [
  { label: '最新', value: 'newest' },
  { label: '最热', value: 'popular' },
  { label: '难度升序', value: 'difficulty-asc' },
  { label: '难度降序', value: 'difficulty-desc' }
]

// 筛选选项
const filterOptions = [
  { label: '全部', value: 'all' },
  { label: '视频教程', value: 'video' },
  { label: '文字教程', value: 'text' },
  { label: '入门级', value: 'beginner' },
  { label: '中级', value: 'intermediate' },
  { label: '高级', value: 'advanced' }
]

// 教程类型接口
interface Tutorial {
  id: string;
  title: string;
  description: string;
  thumbnail: string;
  type: 'video' | 'text';
  category: string;
  subcategory: string;
  level: 'beginner' | 'intermediate' | 'advanced';
  date: Date;
  duration?: string;
  videoUrl?: string;
  content?: string;
  views: number;
  likes: number;
  steps: {
    title: string;
    description: string;
  }[];
}

// 模拟教程数据
const tutorials = ref<Tutorial[]>([
  {
    id: '1',
    title: '皮影快闪软件介绍',
    description: '了解皮影快闪软件的基本功能和特点',
    thumbnail: 'https://picsum.photos/id/1/300/200',
    type: 'video',
    category: 'getting-started',
    subcategory: 'introduction',
    level: 'beginner',
    date: new Date('2023-01-15'),
    duration: '5:30',
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
    views: 12580,
    likes: 856,
    steps: [
      {
        title: '软件概述',
        description: '皮影快闪是一款专为中国传统皮影艺术设计的现代化动画制作软件'
      },
      {
        title: '核心功能',
        description: '了解角色制作、场景设计、动画编辑和AI生成等核心功能模块'
      },
      {
        title: '软件安装',
        description: '如何在不同操作系统上安装皮影快闪软件'
      }
    ]
  },
  {
    id: '2',
    title: '界面布局详解',
    description: '熟悉皮影快闪的界面布局和基本操作',
    thumbnail: 'https://picsum.photos/id/20/300/200',
    type: 'text',
    category: 'getting-started',
    subcategory: 'interface',
    level: 'beginner',
    date: new Date('2023-01-20'),
    content: '皮影快闪的界面设计遵循直观易用的原则，主要分为工具栏、属性面板、图层面板、素材面板和预览窗口等几个部分...',
    views: 8426,
    likes: 542,
    steps: [
      {
        title: '主界面概览',
        description: '了解软件主界面的各个区域和功能分布'
      },
      {
        title: '工具栏使用',
        description: '学习如何使用各种编辑工具和快捷操作'
      },
      {
        title: '面板管理',
        description: '如何调整和自定义面板布局以提高工作效率'
      }
    ]
  },
  {
    id: '3',
    title: '创建你的第一个皮影动画',
    description: '从零开始创建一个简单的皮影动画项目',
    thumbnail: 'https://picsum.photos/id/36/300/200',
    type: 'video',
    category: 'getting-started',
    subcategory: 'first-project',
    level: 'beginner',
    date: new Date('2023-02-05'),
    duration: '15:20',
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
    views: 18920,
    likes: 1245,
    steps: [
      {
        title: '创建新项目',
        description: '如何设置项目参数并创建新的皮影动画项目'
      },
      {
        title: '导入素材',
        description: '从素材库中选择和导入皮影角色和场景元素'
      },
      {
        title: '基础动画制作',
        description: '学习如何添加关键帧和创建简单的动画效果'
      },
      {
        title: '预览和导出',
        description: '如何预览动画效果并导出为视频文件'
      }
    ]
  },
  {
    id: '4',
    title: '角色骨骼系统详解',
    description: '学习如何使用骨骼系统制作可动画的皮影角色',
    thumbnail: 'https://picsum.photos/id/42/300/200',
    type: 'video',
    category: 'character',
    subcategory: 'bone-system',
    level: 'intermediate',
    date: new Date('2023-02-18'),
    duration: '20:45',
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
    views: 7865,
    likes: 632,
    steps: [
      {
        title: '骨骼系统基础',
        description: '了解骨骼系统的原理和基本概念'
      },
      {
        title: '创建骨骼结构',
        description: '如何为皮影角色创建合适的骨骼结构'
      },
      {
        title: '绑定部件',
        description: '将角色部件与骨骼点进行绑定'
      },
      {
        title: '测试动画',
        description: '测试骨骼系统并创建简单的动作'
      }
    ]
  },
  {
    id: '5',
    title: '高级环境效果制作',
    description: '学习如何创建逼真的环境效果提升作品质量',
    thumbnail: 'https://picsum.photos/id/65/300/200',
    type: 'text',
    category: 'scene',
    subcategory: 'environment',
    level: 'advanced',
    date: new Date('2023-03-10'),
    content: '环境效果是提升皮影动画视觉质量的重要元素，本教程将详细介绍如何创建各种天气效果、光照效果和环境音效...',
    views: 5240,
    likes: 428,
    steps: [
      {
        title: '环境编辑器基础',
        description: '了解环境编辑器的功能和使用方法'
      },
      {
        title: '光照效果设置',
        description: '如何设置不同时间和场景的光照效果'
      },
      {
        title: '天气效果制作',
        description: '创建雨、雪、雾等天气效果'
      },
      {
        title: '环境音效添加',
        description: '为场景添加合适的环境音效'
      }
    ]
  },
  {
    id: '6',
    title: 'AI生成角色入门',
    description: '使用AI功能快速生成皮影角色',
    thumbnail: 'https://picsum.photos/id/79/300/200',
    type: 'video',
    category: 'ai',
    subcategory: 'ai-basics',
    level: 'beginner',
    date: new Date('2023-04-05'),
    duration: '12:30',
    videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
    views: 9630,
    likes: 845,
    steps: [
      {
        title: 'AI生成功能介绍',
        description: '了解软件中的AI生成功能和基本原理'
      },
      {
        title: '提示词编写',
        description: '如何编写有效的提示词来生成所需角色'
      },
      {
        title: '结果优化',
        description: '对AI生成结果进行调整和优化'
      },
      {
        title: '应用到项目',
        description: '将生成的角色应用到动画项目中'
      }
    ]
  }
])

// 计算属性：当前分类标题
const currentCategoryTitle = computed(() => {
  const category = categoryOptions.find(cat => cat.key === activeCategory.value)
  if (!category) return '全部教程'
  return category.label
})

// 计算属性：筛选后的教程
const filteredTutorials = computed(() => {
  let result = [...tutorials.value]
  
  // 按分类筛选
  if (activeCategory.value) {
    result = result.filter(tutorial => tutorial.category === activeCategory.value)
  }
  
  // 按搜索关键词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(tutorial => 
      tutorial.title.toLowerCase().includes(query) || 
      tutorial.description.toLowerCase().includes(query)
    )
  }
  
  // 按类型筛选
  if (filterBy.value !== 'all') {
    if (['beginner', 'intermediate', 'advanced'].includes(filterBy.value)) {
      result = result.filter(tutorial => tutorial.level === filterBy.value)
    } else {
      result = result.filter(tutorial => tutorial.type === filterBy.value)
    }
  }
  
  // 排序
  switch (sortBy.value) {
    case 'newest':
      result.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
      break
    case 'popular':
      result.sort((a, b) => b.views - a.views)
      break
    case 'difficulty-asc':
      result.sort((a, b) => {
        const levels = { beginner: 1, intermediate: 2, advanced: 3 }
        return levels[a.level] - levels[b.level]
      })
      break
    case 'difficulty-desc':
      result.sort((a, b) => {
        const levels = { beginner: 1, intermediate: 2, advanced: 3 }
        return levels[b.level] - levels[a.level]
      })
      break
  }
  
  return result
})

// 计算属性：总页数
const totalPages = computed(() => {
  return Math.ceil(filteredTutorials.value.length / pageSize.value)
})

// 打开教程详情
const openTutorial = (tutorial: Tutorial) => {
  selectedTutorial.value = tutorial
  showTutorialModal.value = true
}

// 格式化日期
const formatDate = (date: Date) => {
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}

// 难度等级文本
const levelText = (level: string) => {
  switch (level) {
    case 'beginner': return '入门级'
    case 'intermediate': return '中级'
    case 'advanced': return '高级'
    default: return '未知'
  }
}

// 生命周期钩子
onMounted(() => {
  // 可以在这里加载教程数据
})
</script>

<style lang="scss" scoped>
.tutorials-container {
  padding: 20px;
  height: 100%;
  
  .tutorials-card {
    height: 100%;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      
      h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 500;
      }
      
      .search-box {
        width: 300px;
      }
    }
  }
  
  .tutorials-content {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 24px;
    margin-top: 20px;
    height: calc(100% - 60px);
    
    .tutorials-nav {
      border-right: 1px solid var(--border-color);
      padding-right: 16px;
      overflow-y: auto;
    }
    
    .tutorials-list {
      overflow-y: auto;
      
      .category-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        
        h2 {
          margin: 0;
          font-size: 20px;
          font-weight: 500;
        }
      }
      
      .tutorials-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
        
        .tutorial-card {
          transition: transform 0.2s, box-shadow 0.2s;
          cursor: pointer;
          
          &:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }
          
          &.video-tutorial .tutorial-thumbnail {
            position: relative;
            
            .video-badge {
              position: absolute;
              bottom: 8px;
              right: 8px;
              background-color: rgba(0, 0, 0, 0.7);
              color: white;
              padding: 4px 8px;
              border-radius: 4px;
              font-size: 12px;
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
          
          .tutorial-thumbnail {
            height: 160px;
            overflow: hidden;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.3s;
            }
          }
          
          .tutorial-info {
            padding: 12px;
            
            .tutorial-title {
              margin: 0 0 8px 0;
              font-size: 16px;
              font-weight: 500;
              line-height: 1.4;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            .tutorial-description {
              margin: 0 0 12px 0;
              font-size: 14px;
              color: var(--text-color-secondary);
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              line-height: 1.5;
            }
            
            .tutorial-meta {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 12px;
              
              .tutorial-level {
                padding: 2px 8px;
                border-radius: 12px;
                
                &.beginner {
                  background-color: rgba(0, 128, 0, 0.1);
                  color: green;
                }
                
                &.intermediate {
                  background-color: rgba(255, 165, 0, 0.1);
                  color: orange;
                }
                
                &.advanced {
                  background-color: rgba(255, 0, 0, 0.1);
                  color: red;
                }
              }
              
              .tutorial-date {
                color: var(--text-color-secondary);
              }
            }
          }
        }
      }
      
      .pagination {
        display: flex;
        justify-content: center;
        margin-top: 24px;
        margin-bottom: 24px;
      }
    }
  }
}

.tutorial-detail {
  .tutorial-video {
    margin-bottom: 24px;
    
    video {
      width: 100%;
      border-radius: 4px;
    }
  }
  
  .tutorial-content {
    margin-bottom: 24px;
    
    .tutorial-image {
      width: 100%;
      max-height: 300px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 16px;
    }
    
    .tutorial-text {
      font-size: 15px;
      line-height: 1.6;
      white-space: pre-line;
    }
  }
  
  .tutorial-steps {
    margin-top: 24px;
    
    h3 {
      margin-top: 0;
      margin-bottom: 16px;
      font-size: 18px;
      font-weight: 500;
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .tutorials-container {
    padding: 10px;
    
    .tutorials-content {
      grid-template-columns: 1fr;
      
      .tutorials-nav {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 16px;
        margin-bottom: 16px;
      }
    }
    
    .card-header {
      flex-direction: column;
      align-items: flex-start;
      
      .search-box {
        width: 100%;
      }
    }
  }
}
</style> 